<template>
    <div class="PlaylistDetails">
        <div class="top">
            <p class="title">为你推荐</p>
            <div ref="tabs"  class="tabs">
                <p @click.stop="tabs($event,item)" :class="{active:index===0}" v-for="(item, index) in tabList" :key="index">{{ item }}</p>

            </div>
        </div>
        <div class="content">
            <RecommendList  :cat="recoListCat"></RecommendList>

        </div>

    </div>
</template>

<script>
import RecommendList from '@/components/RecommendList/RecommendList'
export default {
    data() {
        return {
            tabList: [
                '为你推荐','华语','流行','ACG','民谣','电子'
            ],
            tabsTitle:'为你推荐',
            recoListCat:'为你推荐'
        }
    },
    components: {
        RecommendList
    },
    methods: {
        tabs(e,item) {
           for (let i = 0; i < this.$refs.tabs.childNodes.length; i++) {
            this.$refs.tabs.childNodes[i].classList.remove('active')
           }
            e.target.classList.add('active')
            this.tabsTitle = item
            this.recoListCat=item
            console.log(this.recoListCat);
         }
    },
    created(){
        
    }
}
</script>

<style lang="less" scoped>
.PlaylistDetails {
    padding-top: 20px;
    .top {

        text-align: center;
        padding-bottom: 10px;
        .title{
            font-size: 25px;
            font-weight: bold;
            padding-bottom: 10px;
        }
    }
    .tabs{
        width: 300px;
        margin: 0 auto;
        justify-content: space-between;
        font-size: 14px;
        display: flex;
        p{
            display: inline-block;

        }
        .active{
            font-size: 16px;
            font-weight: bold;
            border-bottom: 2px solid #F7BECD;
        }
    }
   
}
</style>